<template>
	<view class="uni-navbar">
		<view :class="{'uni-navbar--fixed': fixed,'uni-navbar--shadow':border,'uni-navbar--border':border}" class="uni-flex uni-flex-center uni-flex-space-between uni-navbar__content">
			<view class="input-view">
				<uni-icons type="sousuo" size="18" :color="color" />
				<input :value="searchVal" confirm-type="search" class="input" type="text" placeholder="请输入搜索内容" @input="onInput">
				<uni-icons :color="color" class="icon-clear" type="shanchu" size="16" @click="clear" />
				<text :style="{'background-color': searchVal==='' ? '' : backgroundColor,'color': searchVal==='' ? backgroundColor : '#fff'}"  class="search-btn" @click="search">搜索</text>
			</view>
			<!-- 筛选插槽 -->
			<slot />
		</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icons/uni-icons.vue'
	export default {
		name: 'UniNavBar',
		components: {
			uniIcons
		},
		props: {
			searchVal:{
				type: String,
				default: ''
			},
			fixed: {
				type: [Boolean, String],
				default: false
			},
			color: {
				type: String,
				default: '#000000'
			},
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			shadow: {
				type: [String, Boolean],
				default: true
			},
			border: {
				type: [String, Boolean],
				default: true
			}
		},
		methods: {
			onInput(e) {
				//传出值
				this.$emit('input', e.target.value)
			},
			search() {
				this.$emit('search')
			},
			clear() {
				this.$emit('clear')
			}
		}
	}
</script>

<style lang="scss">
	$nav-height:44px;

	.uni-navbar {
		height: 100rpx;
		background: #fff;
		&__content {
			// display: block;
			position: relative;
			width: 100%;
			background-color: $uni-bg-color;
			overflow: hidden;
			.uni-navbar__content_view {
				// line-height: $nav-height;
				display: flex;
				align-items: center;
			}
			.input-view{
				width: 100%;
			}
		}

		&__header {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: $nav-height;
			line-height: $nav-height;
			font-size: 16px;

			&-btns {
				display: inline-flex;
				flex-wrap: nowrap;
				flex-shrink: 0;
				width: 120upx;
				padding: 0 12upx;

				&:first-child {
					padding-left: 0;
				}

				&:last-child {
					width: 60upx;
				}

				&-right:last-child {
					width: 120rpx;
					text-align: right;
					flex-direction: row-reverse;
				}
			}

			&-container {
				width: 100%;
				// margin: 0 10upx;

				&-inner {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 30upx;
					// padding-right: 60upx;
				}
			}
		}

		&__placeholder {
			&-view {
				height: $nav-height;
			}
		}

		&--fixed {
			position: fixed;
			z-index: 998;
		}

		&--shadow {
			box-shadow: 0 1px 6px #ccc;
		}

		&--border:after {
			position: absolute;
			z-index: 3;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1px;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: $uni-border-color;
		}
	}
</style>
